﻿@page "/splitter"

@using EasyXaf.Blazor.Splitters

<h4 class="mt-5">垂直拆分</h4>

<Splitter ClassName="card" Style="width:800px;height:150px;">
    <Panel1>
        <h4>Panel1</h4>
    </Panel1>
    <Panel2>
        <h4>Panel2</h4>
    </Panel2>
</Splitter>

<h4 class="mt-5">水平拆分</h4>

<Splitter ClassName="card" Orientation="SplitterOrientation.Horizontal" Style="width:800px;height:300px;">
    <Panel1>
        <h4>Panel1</h4>
    </Panel1>
    <Panel2>
        <h4>Panel2</h4>
    </Panel2>
</Splitter>

<h4 class="mt-5">垂直拆分（像素大小）</h4>

<Splitter ClassName="card" Panel1Size="300px" Style="width:800px;height:150px;">
    <Panel1>
        <h4>Panel1</h4>
    </Panel1>
    <Panel2>
        <Splitter Panel2Size="100px" Style="width:100%;height:100%;">
            <Panel1>
                <h4>Panel2</h4>
            </Panel1>
            <Panel2>
                <h4>Panel3</h4>
            </Panel2>
        </Splitter>
    </Panel2>
</Splitter>

<h4 class="mt-5">垂直拆分（百分比大小）</h4>

<Splitter ClassName="card" Style="width:800px;height:150px;">
    <Panel1>
        <Splitter Style="width:100%;height:100%;">
            <Panel1>
                <h4>Panel1</h4>
            </Panel1>
            <Panel2>
                <h4>Panel2</h4>
            </Panel2>
        </Splitter>
    </Panel1>
    <Panel2>
        <Splitter Style="width:100%;height:100%;">
            <Panel1>
                <h4>Panel3</h4>
            </Panel1>
            <Panel2>
                <h4>Panel4</h4>
            </Panel2>
        </Splitter>
    </Panel2>
</Splitter>

<h4 class="mt-5">水平垂直拆分</h4>

<Splitter ClassName="card" Orientation="SplitterOrientation.Horizontal" Style="width:800px;height:300px;">
    <Panel1>
        <h4>Panel1</h4>
    </Panel1>
    <Panel2>
        <Splitter Style="width:100%;height:100%;">
            <Panel1>
                <h4>Panel2</h4>
            </Panel1>
            <Panel2>
                <h4>Panel3</h4>
            </Panel2>
        </Splitter>
    </Panel2>
</Splitter>

<h4 class="mt-5">垂直水平拆分</h4>

<Splitter ClassName="card" Style="width:800px;height:300px;">
    <Panel1>
        <h4>Panel1</h4>
    </Panel1>
    <Panel2>
        <Splitter Orientation="SplitterOrientation.Horizontal" Style="width:100%;height:100%;">
            <Panel1>
                <h4>Panel2</h4>
            </Panel1>
            <Panel2>
                <h4>Panel3</h4>
            </Panel2>
        </Splitter>
    </Panel2>
</Splitter>

<p class="mb-5"></p>